<template>
    <div 
        :class="{
            new_bt:true,
            bt_cursor:lock,
        }"
        @click="onClick">
        <i 
            :class="loading ? 'el-icon-loading' : 'el-icon-right'">
        </i>
    </div>
</template>
<script>
//更新数据按钮
export default {
    name:'NewBt',
    props:{
        loading:{  //加载状态
            type:Boolean,
            default:false,
        },
        lockTime:{  //按钮每次点击锁定时间（ms）
            type:Number,
            default:0,
        },
    },
    data(){
        return{
            lock:false,  //按钮锁定不可点击
        }
    },
    created(){
        if (!process.client) return;
        this.initKey();
    },
    methods:{
        initKey(){  //初始化键盘事件
            document.addEventListener('keydown',(event)=>{  //初始化空格键事件
                if (event.keyCode == 32) {
                    this.onClick();
                    return false; 
                }
            });
        },
        onClick(){  //触发点击属性（加上各种限制条件）
            if(this.lock) return;
            this.lock = true;
            setTimeout(()=>{
                this.lock = false;
            },this.lockTime);
            this.$emit("onClick");
        },
    },
}
</script>
<style lang='scss' scoped>
$bt_new_background:#e42c64;
$bt_cursor_background:#f5587b;
.new_bt{	
    background:$bt_new_background;
    font-size:30px;
    color:#eae3e3;
    font-weight: bold;
    border-radius:100%; 
    box-shadow: 0 0 3px #841f49;
    cursor:pointer;
    transition: color 0.2s;
    animation:cursor_end 0.2s,font-size 0.2s;
    &:hover { 
        color:#621055;
        font-size:32px;
    }
}
.bt_cursor{   /*禁止点击的样式 */
    cursor:no-drop;
    animation:cursor_start 0.2s;
    background-color:$bt_cursor_background;
}
@keyframes cursor_start
{
    0% {background:$bt_new_background;}
    100% {background-color: $bt_cursor_background;}
}
@keyframes cursor_end
{
    0% {background:$bt_cursor_background;}
    100% {background-color: $bt_new_background;}
}

</style>